<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<title>It's Brain - premium admin HTML template by Eugene Kopyov</title>

<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Cuprum" rel="stylesheet" type="text/css" />

<script src="js/jquery-1.4.4.js" type="text/javascript"></script>

<script type="text/javascript" src="js/spinner/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/spinner/ui.spinner.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

<script type="text/javascript" src="js/fileManager/elfinder.min.js"></script>

<script type="text/javascript" src="js/wysiwyg/jquery.wysiwyg.js"></script>
<script type="text/javascript" src="js/wysiwyg/wysiwyg.image.js"></script>
<script type="text/javascript" src="js/wysiwyg/wysiwyg.link.js"></script>
<script type="text/javascript" src="js/wysiwyg/wysiwyg.table.js"></script>

<script type="text/javascript" src="js/flot/jquery.flot.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.pie.js"></script>
<script type="text/javascript" src="js/flot/excanvas.min.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.resize.js"></script>

<script type="text/javascript" src="js/dataTables/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/dataTables/colResizable.min.js"></script>

<script type="text/javascript" src="js/forms/forms.js"></script>
<script type="text/javascript" src="js/forms/autogrowtextarea.js"></script>
<script type="text/javascript" src="js/forms/autotab.js"></script>
<script type="text/javascript" src="js/forms/jquery.validationEngine-en.js"></script>
<script type="text/javascript" src="js/forms/jquery.validationEngine.js"></script>
<script type="text/javascript" src="js/forms/jquery.dualListBox.js"></script>
<script type="text/javascript" src="js/forms/jquery.filestyle.js"></script>

<script type="text/javascript" src="js/colorPicker/colorpicker.js"></script>

<script type="text/javascript" src="js/uploader/plupload.js"></script>
<script type="text/javascript" src="js/uploader/plupload.html5.js"></script>
<script type="text/javascript" src="js/uploader/plupload.html4.js"></script>
<script type="text/javascript" src="js/uploader/jquery.plupload.queue.js"></script>

<script type="text/javascript" src="js/ui/progress.js"></script>
<script type="text/javascript" src="js/ui/jquery.jgrowl.js"></script>
<script type="text/javascript" src="js/ui/jquery.tipsy.js"></script>
<script type="text/javascript" src="js/ui/jquery.alerts.js"></script>

<script type="text/javascript" src="js/jBreadCrumb.1.1.js"></script>
<script type="text/javascript" src="js/cal.min.js"></script>
<script type="text/javascript" src="js/jquery.smartWizard.min.js"></script>
<script type="text/javascript" src="js/jquery.collapsible.min.js"></script>
<script type="text/javascript" src="js/jquery.ToTop.js"></script>
<script type="text/javascript" src="js/jquery.listnav.js"></script>
<script type="text/javascript" src="js/jquery.sourcerer.js"></script>
<script type="text/javascript" src="js/jquery.timeentry.min.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>

<script type="text/javascript" src="js/custom.js"></script>

</head>

<body>

<!-- Top navigation bar -->
<div id="topNav">
    <div class="fixed">
        <div class="wrapper">
            <div class="welcome"><a href="#" title=""><img src="images/userPic.png" alt="" /></a><span>Howdy, Eugene!</span></div>
            <div class="userNav">
                <ul>
                    <li><a href="#" title=""><img src="images/icons/topnav/profile.png" alt="" /><span>Profile</span></a></li>
                    <li><a href="#" title=""><img src="images/icons/topnav/tasks.png" alt="" /><span>Tasks</span></a></li>
                    <li class="dd"><img src="images/icons/topnav/messages.png" alt="" /><span>Messages</span><span class="numberTop">8</span>
                        <ul class="menu_body">
                            <li><a href="#" title="">new message</a></li>
                            <li><a href="#" title="">inbox</a></li>
                            <li><a href="#" title="">outbox</a></li>
                            <li><a href="#" title="">trash</a></li>
                        </ul>
                    </li>
                    <li><a href="#" title=""><img src="images/icons/topnav/settings.png" alt="" /><span>Settings</span></a></li>
                    <li><a href="login.html" title=""><img src="images/icons/topnav/logout.png" alt="" /><span>Logout</span></a></li>
                </ul>
            </div>
            <div class="fix"></div>
        </div>
    </div>
</div>

<!-- Header -->
<div id="header" class="wrapper">
    <div class="logo"><a href="/" title=""><img src="images/loginLogo.png" alt="" /></a></div>
    <div class="middleNav">
    	<ul>
        	<li class="iMes"><a href="#" title=""><span>Support tickets</span></a><span class="numberMiddle">9</span></li>
            <li class="iStat"><a href="#" title=""><span>Statistics</span></a></li>
            <li class="iUser"><a href="#" title=""><span>User list</span></a></li>
            <li class="iOrders"><a href="#" title=""><span>Billing panel</span></a></li>
        </ul>
    </div>
    <div class="fix"></div>
</div>

<!-- Main wrapper -->
<div class="wrapper">

	<!-- Left navigation -->
    <div class="leftNav">
    	<ul id="menu">
        	<li class="dash"><a href="index.html" title=""><span>Dashboard</span></a></li>
            <li class="graphs"><a href="charts.html" title=""><span>Graphs and charts</span></a></li>
            <li class="forms"><a href="form_elements.html" title=""><span>Form elements</span></a></li>
            <li class="login"><a href="ui_elements.html" title="" class="active"><span>Interface elements</span></a></li>
            <li class="typo"><a href="typo.html" title=""><span>Typography</span></a></li>
            <li class="tables"><a href="tables.html" title=""><span>Tables</span></a></li>
            <li class="cal"><a href="calendar.html" title=""><span>Calendar</span></a></li>
            <li class="gallery"><a href="gallery.html" title=""><span>Gallery</span></a></li>
            <li class="widgets"><a href="widgets.html" title=""><span>Widgets</span></a></li>
            <li class="files"><a href="file_manager.html" title=""><span>File manager</span></a></li>
            <li class="errors"><a href="#" title="" class="exp"><span>Error pages</span><span class="numberLeft">6</span></a>
            	<ul class="sub">
                    <li><a href="403.html" title="">403 page</a></li>
                    <li><a href="404.html" title="">404 page</a></li>
                    <li><a href="405.html" title="">405 page</a></li>
                    <li><a href="500.html" title="">500 page</a></li>
                    <li><a href="503.html" title="">503 page</a></li>
                    <li class="last"><a href="offline.html" title="">Website is offline</a></li>
                </ul>
            </li>
            <li class="pic"><a href="icons.html" title=""><span>Buttons and icons</span></a></li>
            <li class="contacts"><a href="contacts.html" title=""><span>Organized contact list</span></a></li>
        </ul>
    </div>

	<!-- Content -->
    <div class="content" id="container">
    	<div class="title"><h5>Interface elements</h5></div>
        
        <!-- Statistics -->
        <div class="stats">
        	<ul>
            	<li><a href="#" class="count grey" title="">52</a><span>new pending tasks</span></li>
                
                <li><a href="#" class="count blue" title="">520</a><span>pending orders</span></li>
                <li><a href="#" class="count green" title="">14</a><span>new opened tickets</span></li>
                <li class="last"><a href="#" class="count red" title="">48</a><span>new user registrations</span></li>
            </ul>
            <div class="fix"></div>
        </div>
        
        <!-- Form -->
        <form action="" class="mainForm">
        
        	<!-- Sliders -->
            <fieldset>
                <div class="widget first">    
                    <div class="head"><h5 class="iSettings2">Sliders</h5></div>
                    
                    <div class="rowElem noborder">
                        <label>Usual slider: </label>
                        <div class="formRight">
                            <div class="uiSliderInc"></div>
                        </div>
                        <div class="fix"></div>
                    </div>
                    
                    <div class="rowElem">
                        <label>Slider with increments: </label>
                        <div class="formRight">
                            <div class="sliderSpecs">
                                <label for="amount">$50 increments:</label><input type="text" id="amount" />
                                <div class="fix"></div>
                            </div>
                            <div class="uiSliderInc"></div>
                        </div>
                        <div class="fix"></div>
                    </div>
                    
                    <div class="rowElem">
                        <label>Range slider: </label>
                        <div class="formRight">
                            <div class="sliderSpecs">
                                <label for="rangeAmount">Price range:</label><input type="text" id="rangeAmount" />
                                <div class="fix"></div>
                            </div>
                            <div class="uiRangeSlider"></div>
                        </div>
                        <div class="fix"></div>
                    </div>
                    
                    <div class="rowElem">
                        <label>With fixed minimum: </label>
                        <div class="formRight">
                            <div class="sliderSpecs">
                                <label for="minRangeAmount">Minimum:</label><input type="text" id="minRangeAmount" />
                                <div class="fix"></div>
                            </div>
                            <div class="uiMinRange"></div>
                        </div>
                        <div class="fix"></div>
                    </div>
                    
                    <div class="rowElem">
                        <label>With fixed maximum: </label>
                        <div class="formRight">
                            <div class="sliderSpecs">
                                <label for="maxRangeAmount">Maximum:</label><input type="text" id="maxRangeAmount" />
                                <div class="fix"></div>
                            </div>
                            <div class="uiMaxRange"></div>
                        </div>
                        <div class="fix"></div>
                    </div>
                                    
                    <div class="rowElem">
                        <label>Vertical multiple sliders: </label>
                        <div class="formRight sliderSpecs">
                            <div id="eq">
                                <span>88</span>
                                <span>77</span>
                                <span>55</span>
                                <span>33</span>
                                <span>40</span>
                                <span>45</span>
                                <span>70</span>
                                <span>82</span>
                                <span>12</span>
                                <span>89</span>
                                <span>96</span>
                            </div>                    
                        </div>
                        <div class="fix"></div>
                    </div>
                    
                    <div class="fix"></div>
                </div>
            </fieldset>
            
            <!-- Pickers -->
            <fieldset>
                <div class="widget">    
                    <div class="head"><h5 class="iDropper">Pickers</h5></div>
                    <div class="rowElem noborder">
                        <label>Date picker:</label>
                        <div class="formRight">
                            <input type="text" class="datepicker" />
                        </div>
                        <div class="fix"></div>
                    </div>
                    
                    <div class="rowElem">
                        <label>Time picker:</label>
                        <div class="formRight">
                            <input type="text" class="timepicker" size="10"><span class="ml10">use your mousewheel and keyboard</span>
                        </div>
                        <div class="fix"></div>
                    </div>
                    
                    <div class="rowElem">
                        <label>Color picker:</label>
                        <div class="formRight">
                            <input type="text" class="colorpick" id="colorpickerField" value="00ff00" />
                            <label for="colorpickerField" class="pick"></label>
                        </div>
                        <div class="fix"></div>
                    </div>
                    
                    <div class="rowElem">
                        <label>Inline date picker:</label>
                        <div class="formRight">
                            <div class="datepickerInline"></div>
                        </div>
                        <div class="fix"></div>
                    </div>            
                </div>
            </fieldset>
            
            <fieldset>
                <div class="widget">
                    <div class="wizard swMain">
                    
                        <ul>
                            <li><a href="#step-1" class="bordLeft wFirst"><h5 class="stepDesc iAdminUser">Wizard. Step 1</h5></a></li>
                            <li><a href="#step-2"><h5 class="stepDesc iSpeech">Step 2</h5></a></li>
                            <li><a href="#step-3"><h5 class="stepDesc iComputer">Step 3</h5></a></li>
                            <li><a href="#step-4" class="bordRight"><h5 class="stepDesc iStats">Step 4</h5></a></li>
                        </ul>
                        
                        <div id="step-1">	
                        	<!--<h3 class="iAdminUser contentHead">Some nice title goes here</h3>
                            <div class="curves"></div>-->
                            <div class="rowElem nobg"><label>With predefined value:</label><div class="formRight"><input type="text" value="http://" name="inputtext"/></div><div class="fix"></div></div>
                            <div class="rowElem"><label>With max length:</label><div class="formRight"><input type="text" maxlength="20" placeholder="max 20 characters here" name="inputtext"/></div><div class="fix"></div></div>
                            <div class="rowElem"><label>Autogrowing textarea:</label><div class="formRight"><textarea rows="8" cols="" class="auto" name="textarea"></textarea></div><div class="fix"></div></div>
                            <div class="fix"></div>
                        </div>
                        <div id="step-2">
                            <table cellpadding="0" cellspacing="0" width="100%" class="tableStatic">
                                <thead>
                                    <tr>
                                        <td>Column 1</td>
                                        <td>Column 2</td>
                                        <td>Column 3</td>
                                        <td>Column 4</td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Row 1</td>
                                        <td>Row 1</td>
                                        <td>Row 1</td>
                                        <td>Row 1</td>
                                    </tr>
                                    <tr>
                                        <td>Row 2</td>
                                        <td>Row 2</td>
                                        <td>Row 2</td>
                                        <td>Row 2</td>
                                    </tr>
                                    <tr>
                                        <td>Row 3</td>
                                        <td>Row 3</td>
                                        <td>Row 3</td>
                                        <td>Row 3</td>
                                    </tr>
                                    <tr>
                                        <td>Row 4</td>
                                        <td>Row 4</td>
                                        <td>Row 4</td>
                                        <td>Row 4</td>
                                    </tr>
                                    <tr>
                                        <td>Row 5</td>
                                        <td>Row 5</td>
                                        <td>Row 5</td>
                                        <td>Row 5</td>
                                    </tr>
                                </tbody>
                            </table>                        
                        </div>                      
                        <div id="step-3">
                            <table cellpadding="0" cellspacing="0" width="723" class="tableStatic">
                                <thead>
                                    <tr>
                                        <td>Column 1</td>
                                        <td>Column 2</td>
                                        <td>Column 3</td>
                                        <td>Column 4</td>
                                        <td>Column 5</td>
                                        <td>Column 6</td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Row 1</td>
                                        <td>Row 1</td>
                                        <td>Row 1</td>
                                        <td>Row 1</td>
                                        <td>Row 1</td>
                                        <td>Row 1</td>
                                    </tr>
                                    <tr>
                                        <td>Row 2</td>
                                        <td>Row 2</td>
                                        <td>Row 2</td>
                                        <td>Row 2</td>
                                        <td>Row 2</td>
                                        <td>Row 2</td>
                                    </tr>
                                    <tr>
                                        <td>Row 3</td>
                                        <td>Row 3</td>
                                        <td>Row 3</td>
                                        <td>Row 3</td>
                                        <td>Row 3</td>
                                        <td>Row 3</td>
                                    </tr>
                                    <tr>
                                        <td>Row 4</td>
                                        <td>Row 4</td>
                                        <td>Row 4</td>
                                        <td>Row 4</td>
                                        <td>Row 4</td>
                                        <td>Row 4</td>
                                    </tr>
                                    <tr>
                                        <td>Row 5</td>
                                        <td>Row 5</td>
                                        <td>Row 5</td>
                                        <td>Row 5</td>
                                        <td>Row 5</td>
                                        <td>Row 5</td>
                                    </tr>
                                </tbody>
                            </table>                        
                        </div>
                        <div id="step-4">
                            <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
                            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                            </p>                			
                        </div>
                    </div>
                    <div class="fix"></div>
                </div>
            </fieldset>
            
            <!-- Ajax loaders -->
            <fieldset>
                <div class="widget aligncenter">    
                    <div class="head"><h5 class="iRefresh">Ajax loaders</h5></div>
                    <img src="images/loaders/loader.gif" alt="" class="p12" />
                    <img src="images/loaders/loader2.gif" alt="" class="p12" />
                    <img src="images/loaders/loader3.gif" alt="" class="p12" />
                    <img src="images/loaders/loader4.gif" alt="" class="p12" />
                    <img src="images/loaders/loader5.gif" alt="" class="p12" />
                    <img src="images/loaders/loader6.gif" alt="" class="p12" />
                    <img src="images/loaders/loader7.gif" alt="" class="p12" />
                    <img src="images/loaders/loader8.gif" alt="" class="p12" />
                    <img src="images/loaders/loader9.gif" alt="" class="p12" />
                    <img src="images/loaders/loader10.gif" alt="" class="p12" />
                </div>
            </fieldset>
            
            <!-- Progress bars -->
            <fieldset>
                <div class="widget">    
                    <div class="head"><h5 class="iLoading">Progress bars</h5></div>
                    
                    <div class="rowElem noborder">
                        <label>Progress bar with timer and % counting:</label>
                        <div class="formRight">
                            <div id="progress1">
                                <div class="percent"></div>
                                <div class="pbar"></div>
                                <div class="elapsed"></div>
                            </div>
                        </div>
                        <div class="fix"></div>
                    </div>  
                    
                    <div class="rowElem">
                        <label>Progress bar with delay on start:</label>
                        <div class="formRight">
                            <div id="progress2">
                                <div class="percent"></div>
                                <div class="pbar"></div>
                                <div class="elapsed"></div>
                            </div>
                        </div>
                        <div class="fix"></div>
                    </div>   
                    
                    <div class="rowElem">
                        <label>Usual progress bar:</label>
                        <div class="formRight">
                            <div id="progressbar"></div>
                        </div>
                        <div class="fix"></div>
                    </div>
                             
                </div>
            </fieldset>
            
            <!-- Buttons -->
            <fieldset>
                <div class="widget">    
                    <div class="head"><h5 class="iPin">Buttons</h5></div>
                    
                    <div class="rowElem noborder">
                        <label>Submit button:</label>
                        <div class="formRight">
                            <input type="submit" value="submit button" class="basicBtn" />
                            <input type="reset" value="reset button" class="basicBtn" />
                            <input type="button" value="usual button" class="basicBtn" />
                        </div>
                        <div class="fix"></div>
                    </div>
                    
                    <div class="rowElem">
                        <label>Button styles:</label>
                        <div class="formRight">
                            <input type="button" value="button" class="basicBtn" />
                            <input type="button" value="button" class="blueBtn" />
                            <input type="button" value="button" class="redBtn" />
                            <input type="button" value="button" class="seaBtn" />
                            <input type="button" value="button" class="blackBtn" />
                            <input type="button" value="button" class="greyishBtn" />
                            <input type="button" value="button" class="greenBtn" />
                        </div>
                        <div class="fix"></div>
                    </div>
                    
                </div>
            </fieldset>
        </form>
        
        <!-- Growl notifications -->
        <div class="widget">    
            <div class="head"><h5 class="iAlert">Growl notifications</h5></div>
            <div class="body aligncenter">
                <input type="button" value="Basic notification" class="basicBtn mr10 ml10" onclick="$.jGrowl('Hello world!');" />
                <input type="button" value="Sticky notification" class="basicBtn mr10 ml10" onclick="$.jGrowl('Stick this!', { sticky: true });"  />
                <input type="button" value="Message with header" class="basicBtn mr10 ml10" onclick="$.jGrowl('A message with a header', { header: 'Important' });" />
                <input type="button" value="Long live message" class="basicBtn mr10 ml10" onclick="$.jGrowl('A message that will live a little longer.', { life: 10000 });"  />
            </div>
        </div>
        
        <!-- Tabs -->
        <div class="widget">       
            <ul class="tabs">
                <li><a href="#tab3">Tab active</a></li>
                <li><a href="#tab4">Tab inactive</a></li>
            </ul>
            
            <div class="tab_container">
                <div id="tab3" class="tab_content">Widget1</div>
                <div id="tab4" class="tab_content">Widget2</div>
            </div>	
            <div class="fix"></div>	 
        </div>
        
        <!-- Breadcrumbs -->
        <div class="pt20">
            <div class="breadCrumbHolder module">
                <div class="breadCrumb module">
                    <ul>
                        <li class="firstB"><a href="#">Home</a> </li>
                        <li><a href="#">Breadcrumb sample</a></li>
                        <li><a href="#">Second level</a></li>
                        <li><a href="#">Third level</a></li>
                        <li>Current page</li>
                    </ul>
                </div>
            </div>
            
            <div class="breadCrumbHolder module">
                <div id="breadCrumb" class="breadCrumb module">
                    <ul>
                        <li><a href="#">Home</a> </li>
                        <li><a href="#">Breadcrumb sample</a></li>
                        <li><a href="#">Second level</a></li>
                        <li><a href="#">Third level</a></li>
                        <li><a href="#">Fourth level</a></li>
                        <li><a href="#">Fifth level</a></li>
                        <li>Current page</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- Modal alert boxes -->
        <div class="widget">    
            <div class="head"><h5 class="iAlert">Modal alert boxes</h5></div>
            <div class="body aligncenter">
                <input type="button" value="Usual alert" class="basicBtn mr10 ml10 bAlert" />
                <input type="button" value="Confirmation dialog" class="basicBtn mr10 ml10 bConfirm" />
                <input type="button" value="Prompt dialog" class="basicBtn mr10 ml10 bPromt" />
                <input type="button" value="Dialog with HTML support" class="basicBtn mr10 ml10 bHtml" />
            </div>
        </div>
        
        <!-- jQuery UI dialogs -->
        <div class="widget">    
            <div class="head"><h5 class="iAlert">jQuery UI dialogs</h5></div>
            <div class="body aligncenter">
            
                <div class="uDialog">
                    <div id="dialog-message" title="Download complete">
                        <p><img src="images/icons/color/tick.png" alt="" class="icon" />Your files have downloaded successfully into the My Downloads folder.</p>
                        <p>Currently using <strong>36% of your storage space</strong></p>
                        
                        <div class="uiForm">
                            <form action=""  class="mainForm">
                                <input type="text" value="http://" name="inputtext"/>
                                <input type="radio" name="question1" checked="checked" /><label>Selected radio</label>
                                <input type="radio" name="question1" /><label>Normal state</label>
                            </form>
                        </div>
                    </div>
                    <!-- Sample page content to illustrate the layering of the dialog -->
                    <input type="button" value="Usual jQuery UI dialog" class="blueBtn" id="opener" />
                </div>

            </div>
        </div>
        
        <!-- Notification messages -->
        <div class="pt20">
            <div class="nNote nWarning hideit">
                <p><strong>WARNING: </strong>This is a warning message. You can use this to warn users on any events</p>
            </div>
            <div class="nNote nInformation hideit">
                <p><strong>INFORMATION: </strong>This is a message for information, can be any general information.</p>
            </div>   
            <div class="nNote nSuccess hideit">
                <p><strong>SUCCESS: </strong>Success message! hoooraaay!!!!</p>
            </div>  
            <div class="nNote nFailure hideit">
                <p><strong>FAILURE: </strong>Oops sorry. That action is not valid, or our servers have gone bonkers</p>
            </div>
        </div>
        
		<!-- Pagination -->
		<div class="pagination">
			<ul class="pages">
				<li class="prev"><a href="#">&lt;</a></li>
				<li><a href="#" class="active">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
				<li><a href="#">5</a></li>
				<li><a href="#">6</a></li>
				<li><a href="#">7</a></li>
				<li><a href="#">8</a></li>
				<li>...</li>
				<li><a href="#">30</a></li>
				<li class="next"><a href="#">&gt;</a></li>
			</ul>
		</div>
        
        <!-- Tooltip directions -->
        <div class="widget">    
            <div class="head"><h5 class="iFull2">Tooltip directions</h5></div>
            <div class="body aligncenter">
                <input type="button" value="left direction" class="basicBtn leftDir mr20 ml20" title="West tooltip direction" />
                <input type="button" value="top direction" class="basicBtn topDir mr20 ml20" title="North tooltip direction" />
                <input type="button" value="bottom direction" class="basicBtn botDir mr20 ml20" title="South tooltip direction" />
                <input type="button" value="right direction" class="basicBtn rightDir mr20 ml20" title="East tooltip direction" />
            </div>
        </div>

    </div>
<div class="fix"></div>
</div>

<!-- Footer -->
<div id="footer">
	<div class="wrapper">
    	<span>&copy; Copyright 2011. All rights reserved. It's Brain admin theme by <a href="#" title="">Eugene Kopyov</a></span>
    </div>
</div>

</body>
</html>
